// SPDX-License-Identifier: MIT

@use "../settings/config" as cfg;
@use "../settings/effects";
@use "../settings/icons";

$color-bg:        -color-bg-default     !default;
$color-fg:        -color-fg-default     !default;
$color-border:    -color-border-default !default;
$color-separator: -color-border-subtle  !default;

// horizontal tabs (tb = top+bottom)
$color-tb-bg-hover:     -color-bg-subtle      !default;
$color-tb-fg-hover:     -color-fg-default     !default;
$color-tb-border-hover: -color-border-default !default;

$color-tb-bg-selected:     -color-bg-default      !default;
$color-tb-fg-selected:     -color-fg-default      !default;
$color-tb-border-selected: -color-accent-emphasis !default;

// vertical tabs (lr = left+right)
$color-lr-bg-hover:     -color-bg-subtle      !default;
$color-lr-fg-hover:     -color-fg-default     !default;
$color-lr-border-hover: -color-border-default !default;

$color-lr-bg-selected:     if(cfg.$darkMode, -color-base-7, -color-base-1) !default;
$color-lr-fg-selected:     -color-fg-default     !default;
$color-lr-border-selected: -color-border-default !default;

$tab-padding-x:       0.6em !default;
$tab-padding-x-dense: 0.3em !default;
$tab-padding-y:       0.3em !default;
$tab-padding-y-dense: 0.2em !default;

$tab-tb-label-padding-x:       0.4em !default;
$tab-tb-label-padding-x-dense: 0.2em !default;
$tab-tb-label-padding-y:       0.4em !default;
$tab-tb-label-padding-y-dense: 0.2em !default;

$tab-lr-label-padding-x:       0.4em !default;
$tab-lr-label-padding-x-dense: 0.3em !default;
$tab-lr-label-padding-y:       0.2em !default;
$tab-lr-label-padding-y-dense: 0.15em !default;

$header-border-width: 2px !default;

// floating tabs
$color-float-header-area: -color-bg-inset  !default;

$color-float-bg:     -color-bg-inset       !default;
$color-float-border: -color-border-default !default;

$color-float-bg-selected:     -color-bg-default     !default;
$color-float-fg-selected:     -color-fg-default     !default;
$color-float-border-selected: -color-border-default !default;

$tab-float-label-padding-x:       0.6em !default;
$tab-float-label-padding-x-dense: 0.4em !default;
$tab-float-label-padding-y:       0.6em !default;
$tab-float-label-padding-y-dense: 0.4em !default;

$header-float-border-width: 1px   !default;
$tab-float-spacing:         3px   !default;
$tab-float-width:           150px !default;

// classic tabs
$color-classic-bg:      -color-bg-subtle    !default;
$color-classic-border:  -color-border-muted !default;

$color-classic-bg-selected:     -color-bg-default   !default;
$color-classic-fg-selected:     -color-fg-default   !default;
$color-classic-border-selected: -color-border-muted !default;

$header-classic-padding-x:   5px !default;
$header-classic-padding-y:   5px !default;

.tab-pane {
  -color-tab-bg-selected:     $color-tb-bg-selected;
  -color-tab-fg-selected:     $color-tb-fg-selected;
  -color-tab-border-selected: $color-tb-border-selected;

  >.tab-header-area {
    -fx-background-insets: 0;
    -fx-background-color: $color-bg;
    -fx-alignment: CENTER;

    >.tab-header-background {
      -fx-background-insets: 0 0 0 0, 0 0 $header-border-width 0;
      -fx-background-color: $color-border, $color-bg;
    }

    >.headers-region {
      >.tab {
        -fx-background-insets: 0 0 0 0, 0 0 $header-border-width 0;
        -fx-background-color: transparent, transparent;
        -fx-padding: $tab-padding-y $tab-padding-x $tab-padding-y $tab-padding-x;

        >.tab-container {
          >.tab-label {
            -fx-alignment: CENTER;
            -fx-text-fill: $color-fg;
            -fx-padding: $tab-tb-label-padding-y $tab-tb-label-padding-x $tab-tb-label-padding-y $tab-tb-label-padding-x;

            >* {
              -fx-fill: $color-fg;
              -fx-icon-color: $color-fg;
            }
          }

          >.tab-close-button {
            -fx-background-color: $color-fg;
            -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
            -fx-scale-shape: false;

            // Close button implemented as a single StackPane that transformed to the close icon via SVG path.
            // Since there's no any wrapper around it, it's impossible to create background color hover effect.
            // We can only manipulate icon color or scale or cursor.
            &:hover {
              -fx-cursor: hand;
              -fx-scale-x: 1.1;
              -fx-scale-y: 1.1;
            }
          }
        }

        &:hover {
          -fx-background-color: $color-tb-border-hover, $color-tb-bg-hover;
        }

        &:top:selected,
        &:bottom:selected {
          -fx-background-color: -color-tab-border-selected, -color-tab-bg-selected;

          >.tab-container {
            >.tab-label {
              -fx-fill: -color-tab-fg-selected;
              -fx-text-fill: -color-tab-fg-selected;

              >* {
                -fx-fill: -color-tab-fg-selected;
                -fx-icon-color: -color-tab-fg-selected;
              }
            }

            >.tab-close-button {
              -fx-background-color: -color-tab-fg-selected;
            }
          }
        }

        // order matters, as JavaFX CSS doesn't support not() selector,
        // 'disabled' have to be applied after 'hover' and 'selected'
        &:disabled {
          -fx-background-color: $color-border, $color-bg;

          >.tab-container {
            -fx-opacity: cfg.$opacity-disabled;
          }
        }

        // vertical tabs
        &:left,
        &:right {
          >.tab-container {
            >.tab-label {
              -fx-padding: $tab-lr-label-padding-y $tab-lr-label-padding-x $tab-lr-label-padding-y $tab-lr-label-padding-x;
            }
          }

          &:hover {
            -fx-background-color: $color-lr-border-hover, $color-lr-bg-hover;

            >.tab-container {
              >.tab-label {
                -fx-text-fill: $color-lr-fg-hover;
              }

              >.tab-close-button {
                -fx-background-color: $color-lr-fg-hover;
              }
            }
          }

          &:selected {
            -fx-background-color: -color-tab-border-selected, -color-tab-bg-selected;

            >.tab-container {
              >.tab-label {
                -fx-fill: -color-tab-fg-selected;
                -fx-text-fill: -color-tab-fg-selected;

                >* {
                  -fx-fill: -color-tab-fg-selected;
                  -fx-icon-color: -color-tab-fg-selected;
                }
              }

              >.tab-close-button {
                -fx-background-color: -color-tab-fg-selected;
              }
            }
          }

          // order matters, because JavaFX CSS doesn't support not() selector,
          // 'disabled' have to be applied after 'hover' and 'selected'
          &:disabled {
            -fx-background-color: transparent;
          }
        }
      }
    }

    >.control-buttons-tab>.container {
      >.tab-down-button {
        -fx-padding: 1em;

        &:disabled {
          -fx-opacity: cfg.$opacity-disabled;
        }

        >.arrow {
          @include icons.get("arrow-drop-down", false);
          -fx-background-color: $color-fg;
        }
      }
    }
  }

  &.dense {
    >.tab-header-area >.headers-region {
      >.tab {
        -fx-padding: $tab-padding-y-dense $tab-padding-x-dense $tab-padding-y-dense $tab-padding-x-dense;

        >.tab-container {
          >.tab-label {
            -fx-padding: $tab-tb-label-padding-y-dense $tab-tb-label-padding-x-dense $tab-tb-label-padding-y-dense $tab-tb-label-padding-x-dense;
          }
        }

        &:left,
        &:right {
          >.tab-container {
            >.tab-label {
              -fx-padding: $tab-lr-label-padding-y-dense $tab-lr-label-padding-x-dense $tab-lr-label-padding-y-dense $tab-lr-label-padding-x-dense;
            }
          }
        }
      }
    }
  }

  // TabPane.STYLE_CLASS_FLOATING or Styles.TABS_FLOATING
  &.floating {
    -color-tab-bg-selected:     $color-float-bg-selected;
    -color-tab-fg-selected:     $color-float-fg-selected;
    -color-tab-border-selected: $color-float-border-selected;

    >.tab-header-area {
      -fx-background-color: $color-float-border, $color-float-header-area;
      -fx-background-insets: 0, 0 0 $header-float-border-width 0;

      // NOTE: Floating TabPane doesn't have '.tab-header-background'.

      >.headers-region {
        >.tab {
          -fx-background-insets: 0;
          -fx-background-color: transparent;
          -fx-padding: $tab-padding-y 0 $tab-padding-y $tab-float-spacing;

          >.tab-container {
            -fx-background-color: $color-separator, $color-float-bg;
            -fx-background-insets: 0, 0 1 0 0;
            -fx-background-radius: 0;
            -fx-border-radius: cfg.$border-radius;
            // an ugly hack to create right padding for the close button
            // sadly, it's not possible other way
            -fx-border-width: cfg.$border-width, 0 3px 0 0;
            -fx-border-color: transparent, transparent;

            >.tab-label {
              -fx-padding: $tab-float-label-padding-y $tab-float-label-padding-x $tab-float-label-padding-y $tab-float-label-padding-x;
              -fx-min-width: $tab-float-width;
              -fx-pref-width: $tab-float-width;
              -fx-alignment: CENTER_LEFT;
            }
          }

          &:hover,
          &:selected {
            >.tab-container {
              -fx-background-color: -color-tab-bg-selected;
              -fx-border-color: -color-tab-border-selected, transparent;

            >.tab-label {
                -fx-fill: -color-tab-fg-selected;
                -fx-text-fill: -color-tab-fg-selected;

                >* {
                  -fx-fill: -color-tab-fg-selected;
                  -fx-icon-color: -color-tab-fg-selected;
                }
              }

              >.tab-close-button {
                -fx-background-color: -color-tab-fg-selected;
              }
            }
          }
        }
      }
    }
  }

  &.floating.dense {
    >.tab-header-area {
      >.headers-region {
        >.tab {
          -fx-padding: $tab-padding-y-dense 0 $tab-padding-y-dense $tab-float-spacing;

          >.tab-container {
            >.tab-label {
              -fx-padding: $tab-float-label-padding-y-dense $tab-float-label-padding-x-dense $tab-float-label-padding-y-dense $tab-float-label-padding-x-dense;
            }
          }
        }
      }
    }
  }

  // Styles.TABS_CLASSIC
  &.classic {
    -color-tab-bg-selected:     $color-classic-bg-selected;
    -color-tab-fg-selected:     $color-classic-fg-selected;
    -color-tab-border-selected: $color-classic-border-selected;

    >.tab-header-area {
      -fx-padding: $header-classic-padding-y 0 0 $header-classic-padding-x;

      >.tab-header-background {
        -fx-background-insets: 0 0 0 0, 0 0 $header-border-width 0;
        -fx-background-color: $color-classic-border, $color-classic-bg;
      }

      >.headers-region {
        >.tab {
          -fx-background-insets: 0;
          -fx-background-color: transparent;

          >.tab-container {
            -fx-padding: 0;
          }

          &:top:selected,
          &:bottom:selected {
            -fx-background-insets: 0 0 0 0, $header-border-width $header-border-width 0 $header-border-width;
            -fx-background-color: -color-tab-border-selected, -color-tab-bg-selected;
          }

          &:left:selected,
          &:right:selected {
            -fx-background-insets: 0 0 0 0, $header-border-width $header-border-width 0 $header-border-width;
            -fx-background-color: -color-tab-border-selected, -color-tab-bg-selected;
          }

          &:hover,
          &:selected {
            >.tab-container {
              -fx-border-color: none;
            }
          }
        }
      }
    }

    &:bottom {
      >.tab-header-area {
        -fx-padding: 0 0 $header-classic-padding-y $header-classic-padding-x;
      }
    }

    &:right {
      >.tab-header-area {
        -fx-padding: $header-classic-padding-y $header-classic-padding-x 0 0;
      }
    }
  }
}
